<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .slideshow{
        width: 90%;
        height: 80vh;
        background-color: #000;
        position: relative;
        overflow: hidden;
    }
    .slideshow-item{
        width: 100%;
        height: inherit;
        position: absolute;
        opacity: 0;
        /* 动画时间改 */
        animation: selemt 21s infinite;
    }
    .slideshow-item img{
        transform: scale(1);
        animation: aniImg 21s infinite;
    }
    /* 延迟改 */
    .slideshow-item:nth-child(1),
    .slideshow-item:nth-child(1) img{
        animation-delay: 0s; 
    }
    .slideshow-item:nth-child(2),
    .slideshow-item:nth-child(2) img{
        animation-delay: 7s;
    }
    .slideshow-item:nth-child(3),
    .slideshow-item:nth-child(3) img{
        animation-delay: 14s;
    }
    .slideshow-item-text{
        position: absolute;
        top: 0;
        left: 50%;
        transform: translate(-50%, 0%);
        z-index: 1;
        width: 40%;
        background-color: rgba(0, 0, 0, 0.6);
        color:white;
        padding: 10px;
    }
    .slideshow img{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    /* 固定不要动 */
    @keyframes selemt {
        25%{
            opacity: 1;
        }
        40%{
            opacity: 0;
        }
    }
    @keyframes aniImg {
        to{
            transform: scale(1.5);
        }
    }
</style>
<body>
    <div class="slideshow">
        <div class="slideshow-item">
            <img src="https://images.unsplash.com/photo-1556807044-eaf2e0eecb6d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" alt="First Image Silde Picture">
            <div class="slideshow-item-text">
                <h5>New York City, NY</h5>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae molestiae odio in! Odit adipisci exercitationem accusantium ea enim deleniti, maiores corrupti nam, voluptas nemo excepturi? Doloremque, architecto? Asperiores, dolores perspiciatis voluptates aperiam ex vero vel, natus dolore cupiditate ab similique error odit obcaecati sunt minus quis quos velit earum ad?</p>
            </div>
        </div>
        
        <div class="slideshow-item">
            <img src="https://images.unsplash.com/photo-1510673354311-c81bb8506fc2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1929&q=80" alt="First Image Silde Picture">
            <div class="slideshow-item-text">
                <h5>Sanfransisco, CA</h5>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae molestiae odio in! Odit adipisci exercitationem accusantium ea enim deleniti, maiores corrupti nam, voluptas nemo excepturi? Doloremque, architecto? Asperiores, dolores perspiciatis voluptates aperiam ex vero vel, natus dolore cupiditate ab similique error odit obcaecati sunt minus quis quos velit earum ad?</p>
            </div>
        </div>
        <div class="slideshow-item">
            <img src="https://images.unsplash.com/photo-1530959106156-50f49c30932d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" alt="First Image Silde Picture">
            <div class="slideshow-item-text">
                <h5>Manhattan, NY</h5>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae molestiae odio in! Odit adipisci exercitationem accusantium ea enim deleniti, maiores corrupti nam, voluptas nemo excepturi? Doloremque, architecto? Asperiores, dolores perspiciatis voluptates aperiam ex vero vel, natus dolore cupiditate ab similique error odit obcaecati sunt minus quis quos velit earum ad?</p>
            </div>
        </div>
    </div>
</body>
</html>